<template>
  <el-row :gutter="gutter" :style="gutterStyle">
    <el-col :span="8">
      <el-form-item prop="province">
        <el-input
          v-model="iMapForm.province"
          ref="provinceRef"
          placeholder="省"
          size="large"
          style="width: 100%"
          @click="handleAmapChange"
        ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item prop="city">
        <el-input
          v-model="iMapForm.city"
          ref="cityRef"
          placeholder="市"
          size="large"
          style="width: 100%"
          @click="handleAmapChange"
        ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item prop="district">
        <el-input
          v-model="iMapForm.district"
          ref="districtRef"
          placeholder="县"
          size="large"
          style="width: 100%"
          @click="handleAmapChange"
        ></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-col :span="24">
    <el-form-item prop="address">
      <el-input v-model="iMapForm.address" placeholder="请输入详细地址" size="large" style="width: 100%"></el-input>
    </el-form-item>
  </el-col>
  <AmapDialog v-model:visible="amapFlag" v-model:amap="iMapForm" />
</template>

<script setup lang="ts" name="AmapExplore">
import { ref, reactive, watch, inject, watchEffect } from "vue";
import type { FormRules } from "element-plus";
import { IAddress } from "./interface/index";
import AmapDialog from "./components/AmapDialog.vue";

// 栅格间隔与样式
const gutter = 20;
const gutterStyle = {
  width: `calc(100% + ${gutter}px)`,
  "margin-bottom": `${gutter}px`
};

// 接收传入的formData和formRules
const { ruleForm, rules } = inject<{ ruleForm: Object; rules: any }>("aMap", { ruleForm: reactive({}), rules: reactive({}) });

const iMapForm = ref<IAddress>({
  province: "",
  city: "",
  district: "",
  address: "",
  lnglat: []
});

// 若地址有值，则赋予formData
watch(
  () => iMapForm,
  n => {
    // 为防止重复赋值
    if (n.value.province || n.value.city || n.value.district || n.value.address) {
      Object.assign(ruleForm, { ...iMapForm.value });
    }
  },
  {
    deep: true
  }
);

// 另处理经纬度lnglat
watch([() => iMapForm.value.province, () => iMapForm.value.city, () => iMapForm.value.district], n => {
  if (n.some(item => !item)) {
    iMapForm.value.lnglat = [];
  }
});

watch(
  () => iMapForm.value.lnglat,
  n => {
    if (!n.length) {
      Object.assign(ruleForm, iMapForm.value);
    }
  }
);

// 将formData赋值给iMapForm-主要作用为清空重置
watchEffect(() => {
  Object.assign(iMapForm.value, { ...ruleForm });
});

// form校验;
const iMapRules = reactive<FormRules<IAddress>>({
  province: [{ required: true, message: "请选择省", trigger: ["blur", "change"] }],
  city: [{ required: true, message: "请选择市", trigger: ["blur", "change"] }],
  district: [{ required: true, message: "请选择区、县", trigger: ["blur", "change"] }],
  address: [{ required: true, message: "请输入详细地址", trigger: ["blur", "change"] }]
});

// 合并校验数据;
watch(rules, () => Object.assign(rules, { ...iMapRules }), {
  immediate: true,
  deep: true
});

// 地图弹窗
const amapFlag = ref<boolean>(false);
const provinceRef = ref();
const cityRef = ref();
const districtRef = ref();
const handleAmapChange = () => {
  amapFlag.value = true;
  provinceRef.value.blur();
  cityRef.value.blur();
  districtRef.value.blur();
};
</script>

<style scoped lang="scss"></style>
